<template>
  <div>
    <div><h1>列表页面</h1>当前用户:<el-link>{{currentUser.username}}</el-link></div>
    <div>
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="合作商名称">
          <el-input v-model="search.name" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="所属大区">
          <el-select v-model="search.area" placeholder="所属大区">
            <el-option :key="a.id" v-for="a in alist" :label="a.name" :value="a.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间范围">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="search.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker placeholder="选择时间" v-model="search.date2" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="营业范围">
          <el-select v-model="search.scope" placeholder="营业范围">
            <el-option :key="s.id" v-for="s in slist" :label="s.name" :value="s.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <template>
        <el-table
          :data="form"
          stripe
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="id"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ctype"
            label="合作类型">
            <template slot-scope="scope">{{ scope.row.ctype==1?'销售':'采购' }}</template>
          </el-table-column>
          <el-table-column
            prop="courl"
            label="网址"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cscope"
            label="营业范围"
            width="180">
          </el-table-column>
          <el-table-column
            prop="time"
            label="添加时间"
            width="180">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="search.page"
          :page-size="search.pageSize"
          layout="total, prev, pager, next"
          :total="search.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListView',
  data () {
    return {
      dics: [],
      form: [],
      search: {
        page: 1,
        pageSize: 3,
        total: 0,
        area: 0,
        scope: 0,
        name: '',
        date1: null,
        date2: null
      }
    }
  },
  computed: {
    currentUser () {
      return this.$store.state.userInfo
    },
    alist () {
      // eslint-disable-next-line no-undef
      return this.dics.filter(x => { return x.type === 1 })
    },
    slist () {
      return this.dics.filter(x => { return x.type === 2 })
    }
  },
  methods: {
    onSubmit () {
      this.query()
    },
    handleSizeChange (val) {
      this.search.pageSize = val
      this.query()
    },
    handleCurrentChange (val) {
      this.search.page = val
      this.query()
    },
    handleClick () {

    },
    query () {
      this.axios.post('/cop/list', this.search).then(res => {
        this.form = res.data.jdata.records
        this.search.page = res.data.jdata.current
        this.search.pageSize = res.data.jdata.size
        this.search.total = res.data.jdata.total
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>

</style>
